<template>
  <div class="operationLog-container">
    <!-- 搜索表单 -->
    <el-form :inline="true">
      <el-form-item>
        <el-input
          :clearable="true"
          placeholder="输入账号进行搜索"
          :prefix-icon="Search"
          @change="searchLog"
          v-model="searchValue"
        ></el-input>
      </el-form-item>
      <el-form-item style="text-align: right">
        <el-popconfirm
          :title="`你确定要清空操作日志吗`"
          v-if="userStore.UserInfo.identity === '超级管理员'"
          confirm-button-text="确认"
          cancel-button-text="取消"
          @confirm="clearList"
          width="250px"
        >
          <template #reference>
            <el-button type="danger" size="default">清空列表</el-button>
          </template>
        </el-popconfirm>
      </el-form-item>
    </el-form>
    <!-- 主体表格 -->
    <div class="table">
      <el-table
        :data="operationLogList"
        :default-sort="{ prop: 'operation_time', order: 'descending' }"
      >
        <el-table-column align="center" type="default" prop="operation_person" label="操作者" />
        <el-table-column align="center" type="default" prop="operation_content" label="操作内容" />
        <el-table-column align="center" type="default" prop="operation_level" label="操作等级">
          <template v-slot="{ row }">
            <el-tag type="danger" v-if="row.operation_level === '高级'">{{
              row.operation_level
            }}</el-tag>
            <el-tag type="warning" v-else-if="row.operation_level === '中级'">{{
              row.operation_level
            }}</el-tag>
            <el-tag type="primary" v-else>{{ row.operation_level }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" type="default" prop="operation_time" label="操作时间">
          <template v-slot="{ row }">
            {{ formaDate(row.operation_time) }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          class="pagination"
          v-model:current-page="page"
          :page-size="10"
          layout="prev, pager, next, jumper,total"
          :total="total"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  clearoperationLogAPI,
  getoperationLogListAPI,
  searchoperationLogListAPI
} from '@/api/operationLog'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import moment from 'moment'
import { onMounted, ref, watch } from 'vue'
const formaDate = (date: string) => {
  return moment(date).format('YYYY-MM-DD HH:mm:ss')
}
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
// 分页器数据
const page = ref<number>(1)
const total = ref<number>()
// 搜索Change回调
const searchValue = ref<number>()
const searchLog = async () => {
  if (!searchValue.value) {
    return getLogList()
  }
  const res = await searchoperationLogListAPI(searchValue.value as number)
  operationLogList.value = res.data!
}
// 获取操作日志列表
const operationLogList = ref<operationLog[]>([])
const getLogList = async () => {
  const res = await getoperationLogListAPI(page.value)
  total.value = res.total
  operationLogList.value = res.data!
}

// 删除
const clearList = async () => {
  await clearoperationLogAPI()
  ElMessage({ type: 'success', message: '删除成功' })
  getLogList()
}

watch(page, () => {
  if (searchValue.value) {
    searchLog()
    return
  }
  getLogList()
})

onMounted(() => {
  getLogList()
})
</script>

<style scoped lang="scss">
.operationLog-container {
  padding: 8px;
  .el-form {
    display: flex;
    justify-content: space-between;
    .el-form-item {
      margin: 0;
    }
  }
  .table {
    margin-top: 10px;
    .pagination {
      display: flex;
      justify-content: center;
      margin: 15px;
    }
  }
}
.form {
  max-width: 50%;
  margin: 20px auto;
}
</style>
